<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      title="材料" 
      :border="false"
      :fixed="true"
      :status-bar="true"
      background-color="#4980FF"
      color="#FFFFFF"
      left-icon="back"
      @clickLeft="goBack">
    </uni-nav-bar>
    
    <!-- 筛选条件区域 -->
    <view class="filter-area">
      <view class="filter-item" :class="{ 'active': activeFilter === 'project' }" @click="toggleFilter('project')">
        <text class="filter-text">项目</text>
        <uni-icons :type="activeFilter === 'project' ? 'up' : 'down'" size="12" color="#333333"></uni-icons>
      </view>
      <view class="filter-item" :class="{ 'active': activeFilter === 'supplier' }" @click="toggleFilter('supplier')">
        <text class="filter-text">供应商</text>
        <uni-icons :type="activeFilter === 'supplier' ? 'up' : 'down'" size="12" color="#333333"></uni-icons>
      </view>
      <view class="filter-item" :class="{ 'active': activeFilter === 'status' }" @click="toggleFilter('status')">
        <text class="filter-text">入库状态</text>
        <uni-icons :type="activeFilter === 'status' ? 'up' : 'down'" size="12" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 筛选下拉区域 -->
    <uni-popup ref="filterPopup" type="top" :mask-click="true" @change="onPopupChange">
      <view class="filter-dropdown">
        <view v-if="activeFilter === 'project'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '全部项目' }" @click="selectFilter('project', '全部项目')">
            <text>全部项目</text>
            <uni-icons v-if="selectedFilters.project === '全部项目'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '项目一' }" @click="selectFilter('project', '项目一')">
            <text>项目一</text>
            <uni-icons v-if="selectedFilters.project === '项目一'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.project === '项目二' }" @click="selectFilter('project', '项目二')">
            <text>项目二</text>
            <uni-icons v-if="selectedFilters.project === '项目二'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
        
        <view v-if="activeFilter === 'supplier'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.supplier === '全部供应商' }" @click="selectFilter('supplier', '全部供应商')">
            <text>全部供应商</text>
            <uni-icons v-if="selectedFilters.supplier === '全部供应商'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.supplier === '供应商一' }" @click="selectFilter('supplier', '供应商一')">
            <text>供应商一</text>
            <uni-icons v-if="selectedFilters.supplier === '供应商一'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.supplier === '供应商二' }" @click="selectFilter('supplier', '供应商二')">
            <text>供应商二</text>
            <uni-icons v-if="selectedFilters.supplier === '供应商二'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
        
        <view v-if="activeFilter === 'status'" class="dropdown-content">
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '全部' }" @click="selectFilter('status', '全部')">
            <text>全部</text>
            <uni-icons v-if="selectedFilters.status === '全部'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '已入库' }" @click="selectFilter('status', '已入库')">
            <text>已入库</text>
            <uni-icons v-if="selectedFilters.status === '已入库'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
          <view class="dropdown-item" :class="{ 'selected': selectedFilters.status === '未入库' }" @click="selectFilter('status', '未入库')">
            <text>未入库</text>
            <uni-icons v-if="selectedFilters.status === '未入库'" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 材料列表 -->
    <scroll-view class="material-list" scroll-y>
      <uni-card 
        v-for="(item, index) in materialList" 
        :key="index" 
        :is-shadow="true"
        :is-full="true"
        @click="goToDetail(item)"
        class="material-card">
        <view class="material-header">
          <view class="header-left">
            <text class="material-title">入库编码</text>
            <text class="material-code">{{item.code}}</text>
          </view>
          <uni-tag text="已入库" type="error" size="small"></uni-tag>
        </view>
        <view class="material-info">
          <view class="info-row">
            <uni-icons type="calendar" size="16" color="#86909C"></uni-icons>
            <text class="info-text">计量周期：{{item.period}}</text>
          </view>
          <view class="info-row">
            <uni-icons type="shop" size="16" color="#86909C"></uni-icons>
            <text class="info-text">供应商：{{item.supplier}}</text>
          </view>
          <view class="info-row">
            <uni-icons type="list" size="16" color="#86909C"></uni-icons>
            <text class="info-text">材料条数：{{item.count}}条</text>
          </view>
          <view class="info-row">
            <uni-icons type="clock" size="16" color="#86909C"></uni-icons>
            <text class="info-text">入库时间：{{item.time}}</text>
          </view>
        </view>
      </uni-card>
    </scroll-view>

    <!-- 浮动添加按钮 -->
    <uni-fab 
      :pattern="fabPattern"
      :content="fabContent"
      :horizontal="horizontal"
      :vertical="vertical"
      :direction="direction"
      @fabClick="fabClick">
    </uni-fab>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeFilter: null, // 当前活跃的筛选条件，null表示没有选中
      selectedFilters: {
        project: '全部项目',
        supplier: '全部供应商',
        status: '全部'
      },
      materialList: [
        {
          code: 'RK-000001',
          period: '第1期',
          supplier: '西藏交投工贸有限公司',
          count: '9',
          time: '2023-08-28 20:25:45'
        },
        {
          code: 'RK-000001',
          period: '第1期',
          supplier: '西藏交投工贸有限公司',
          count: '9',
          time: '2023-08-28 20:25:45'
        },
        {
          code: 'RK-000001',
          period: '第1期',
          supplier: '西藏交投工贸有限公司',
          count: '9',
          time: '2023-08-28 20:25:45'
        },
        {
          code: 'RK-000001',
          period: '第1期',
          supplier: '西藏交投工贸有限公司',
          count: '9',
          time: '2023-08-28 20:25:45'
        },
        {
          code: 'RK-000001',
          period: '第1期',
          supplier: '西藏交投工贸有限公司',
          count: '9',
          time: '2023-08-28 20:25:45'
        }
      ],
      fabPattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      fabContent: [
        {
          iconPath: '/static/cl_add.png',
          selectedIconPath: '/static/cl_add.png',
          text: '添加材料',
          active: false
        }
      ],
      horizontal: 'right',
      vertical: 'bottom',
      direction: 'horizontal'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    toggleFilter(filter) {
      if (this.activeFilter === filter) {
        this.activeFilter = null;
        this.$refs.filterPopup.close()
      } else {
        this.activeFilter = filter;
        this.$refs.filterPopup.open()
      }
    },
    selectFilter(filter, value) {
      this.selectedFilters[filter] = value;
      this.activeFilter = null;
      this.$refs.filterPopup.close()
      
      // 这里可以添加筛选逻辑，例如根据筛选条件过滤材料列表
      // this.filterMaterials();
    },
    onPopupChange(e) {
      if (!e.show) {
        this.activeFilter = null
      }
    },
    goToDetail(item) {
      // 跳转到入库单详情页，将入库单编码作为参数传递
      uni.navigateTo({
        url: '/pages/material/detail?code=' + item.code
      });
    },
    fabClick(e) {
      // 跳转到材料入库页面
      uni.navigateTo({
        url: '/pages/material/add'
      });
    }
  }
}
</script>

<style>
/* 移除页面加载后的伪元素 */
:root uni-page-body::after {
  display: none !important;
}

.container {
  flex: 1;
  background-color: #E6EAF3;
  padding-top: 88px;
}

.filter-area {
  height: 53px;
  flex-direction: row;
  background-color: #FFFFFF;
  border-bottom-width: 1px;
  border-bottom-color: #EEEEEE;
}

.filter-item {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.filter-text {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  margin-right: 5px;
}

.material-list {
  flex: 1;
  padding: 5px 10px 0px 10px;
}

.material-card {
  margin-bottom: 8px;
}

.material-card :deep(.uni-card) {
  border-radius: 16px;
  padding: 12px 24px;
}

.material-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.header-left {
  flex-direction: row;
  align-items: center;
  display: flex;
}

.material-title {
  font-size: 16px;
  color: #242731;
  margin-right: 12px;
}

.material-code {
  font-size: 14px;
  color: #72767C;
}

.material-info {
  
}

.info-row {
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
  display: flex;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-text {
  font-size: 12px;
  color: #72767C;
  margin-left: 4px;
}

.filter-item.active .filter-text {
  color: #4980FF;
}

.filter-dropdown {
  width: 100%;
  background-color: #FFFFFF;
  z-index: 11;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-content {
  padding: 10px 0;
}

.dropdown-item {
  height: 44px;
  padding: 0 15px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  display: flex;
}

.dropdown-item text {
  font-size: 14px;
  color: #333333;
}

.dropdown-item.selected {
  background-color: #F5F7FA;
}

.dropdown-item.selected text {
  color: #4980FF;
}

.dropdown-item:active {
  background-color: #F5F5F5;
}
</style>